<template>
	<view class="pages-user-login" v-if="isLoad">
		<view class="flex-column flex-center" style="height: 80vh">
			<image src="../static/index/left.png" mode="" class="leftimg"></image>
			<image src="../static/index/right.png" mode="" class="rightimg"></image>
			<view class="title">Hi欢迎来到</view>
			<image src="../static/index/logg.png" mode="" class="logoimg"></image>
			<input type="text" placeholder="请输入用户名" v-if="configInfo.ps_switch==1" v-model="account" />
			<input type="password" placeholder="输入登录密码" v-if="configInfo.ps_switch==1" v-model="password" />
			<view class="login-btn wechat flex-center f-title c-base radius" :style="{
			background: `linear-gradient(90deg, ${primaryColor} 0%, ${subColor} 99%)`}" v-if="configInfo.ps_switch==1"
				@click="getLand">立即登录
			</view>
			<view @tap.stop="toChooseLogin('weixin')" class="login-btn wechat flex-center f-title c-base radius" :style="{
			background: `linear-gradient(90deg, ${primaryColor} 0%, ${subColor} 99%)`}" v-if="configInfo.ps_switch==0"><i
					class="iconfont icon-weixin mr-md"></i>微信登录（注册）
			</view>
			<view class="wxbox" v-if="configInfo.ps_switch==1" @tap.stop="toChooseLogin('weixin')">
				<view class="line"></view>
				<view class="flex-center flex-column">
					<image src="../static/index/wx.png" mode="" class="wximg"></image>
					<view class="" style="font-size: 20rpx;color: #B8B8B8;">微信登录</view>
				</view>
				<view class="line"></view>
			</view>
			<view class="flex-center" style="margin-top: 40rpx;" @click="is_read= is_read==1?0:1">
				<image src="../static/yCreate/successful.png" mode="" class="read" v-if="is_read==1"></image>
				<image src="../static/index/yuan.png" mode="" class="read" v-if="is_read==0"></image>
				<view class="f-desc c-title">
					请阅读并同意<span @tap.stop="$util.goUrl({url:`/user/pages/protocol`})"
						:style="{color:primaryColor}">
						《隐私政策》
					</span>与<span @tap.stop="$util.goUrl({url:`/user/pages/information`})"
						:style="{color:primaryColor}">
						《服务协议》
					</span>
				</view>
			</view>
			<!-- #ifdef APP-PLUS -->
			<view @tap.stop="toChooseLogin('apple')" class="login-btn apple flex-center f-title c-black radius"
				v-if="is_ios_login"><i class="iconfont icon-apple mr-sm"></i>Sign in with Apple
			</view>
			<!-- #endif -->
		</view>

		<uni-popup ref="show_rule_item" type="center" :maskClick="false">
			<view class="common-popup-content fill-base pd-lg radius-34">
				<view class="title">温馨提示</view>
				<view class="f-desc c-title mt-lg">
					登录即表示您已详细阅读并同意<span @tap.stop="$util.goUrl({url:`/user/pages/protocol`})"
						:style="{color:primaryColor}">
						《隐私政策》
					</span>与<span @tap.stop="$util.goUrl({url:`/user/pages/information`})"
						:style="{color:primaryColor}">
						《服务协议》
					</span>
				</view>
				<view class="button">
					<view @tap.stop="$refs.show_rule_item.close()" class="item-child">取消</view>
					<view @tap.stop="toConfirm" class="item-child" :style="{background: primaryColor,color:'#fff'}">确定
					</view>
				</view>
			</view>
		</uni-popup>

	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from 'vuex';
	import siteInfo from '@/siteinfo.js';
	import AppSocket from '@/utils/webSocket.js';
	export default {
		components: {},
		data() {
			return {
				isLoad: false,
				is_ios_login: false,
				account: "",
				password: "",
				is_read:0
			}
		},
		async onLoad(options) {
			let [syserr, sysinfo] = await uni.getSystemInfo()
			let {
				browserVersion = '',
					platform
			} = sysinfo
			this.is_ios_login = platform === 'ios' && browserVersion.split('.')[0] * 1 > 12
			if (!this.configInfo.id) {
				await this.getConfigInfo()
			}
			this.isLoad = true
			console.log(this.configInfo, 'configInfo')
		},
		computed: mapState({
			primaryColor: state => state.config.configInfo.primaryColor,
			subColor: state => state.config.configInfo.subColor,
			configInfo: state => state.config.configInfo,
			commonOptions: state => state.user.commonOptions,
			autograph: state => state.user.autograph,
			appLogin: state => state.user.appLogin,
			loginType: state => state.user.loginType,
			loginPage: state => state.user.loginPage,
			userInfo: state => state.user.userInfo,
		}),
		methods: {
			...mapActions(['getConfigInfo', 'getUserInfo']),
			...mapMutations(['updateConfigItem', 'updateUserItem', 'updateOrderItem']),
			toChooseLogin(type) {
				this.updateUserItem({
					key: 'loginType',
					val: type
				})
				this.$refs.show_rule_item.open()
			},
			toConfirm() {
				this.$refs.show_rule_item.close()
				// #ifdef H5
				this.toGzhLogin()
				// #endif	
				// #ifdef APP-PLUS
				this.toAppLogin()
				// #endif
			},
			// 公众号登录
			async toGzhLogin() {
				let {
					siteroot,
					gzh_appid
				} = siteInfo
				this.updateUserItem({
					key: 'isGzhLogin',
					val: true
				})
				this.updateUserItem({
					key: 'autograph',
					val: ''
				})
				this.updateUserItem({
					key: 'commonOptions',
					val: this.commonOptions
				})
				let {
					loginPage
				} = this
				let url = siteroot.split('/index.php')[0]
				let href = `${url}/h5/#${loginPage}`
				let pageUrl = window.location.href;
				let redirect_uri = encodeURIComponent(href)
				let authUrl =
					`https://open.weixin.qq.com/connect/oauth2/authorize?appid=${gzh_appid}&redirect_uri=${redirect_uri}&response_type=code&scope=snsapi_userinfo&state=1&connect_redirect=1#wechat_redirect`;
				window.location.href = authUrl
			},
			//APP登录
			async toAppLogin() {
				var app = getApp()
				console.log(app)
				this.$refs.show_rule_item.close()
				let {
					loginType: provider
				} = this
				// try {
				let [providerErr, providerData] = await uni.getProvider({
					service: 'oauth',
				});

				if (providerErr) {
					this.$util.showToast({
						title: providerErr
					})
					return
				}
				console.log(111111111111111)
				await uni.login({
					provider: 'weixin',
					success: function(loginRes) {
						console.log(loginRes, 66333222)
					},
					fail: function(err) {
						console.log(err, 33333333333222222222222)
						// 登录授权失败
						// err.code是错误码
					}
				});
				console.log(provider)
				let [loginErr, loginData] = await uni.login({
					provider
				});
				console.log(loginErr)
				console.log(loginData)
				console.log(999)
				if (loginErr) {
					this.$util.showToast({
						title: loginErr
					})
					return
				}
				console.log(2)
				let [infoErr, infoData] = await uni.getUserInfo({
					provider
				})
				if (infoErr) {
					this.$util.showToast({
						title: infoErr
					})
					return
				}
				console.log(3)

				let {
					userInfo = {}
				} = infoData
				let {
					openId = ''
				} = userInfo
				if (!openId) return
				this.$util.showLoading({
					title: "登录中..."
				})
				console.log(4)
				// try {
				let param = {
					type: provider == 'weixin' ? 2 : 3,
					param: {
						data: userInfo
					},
					init: 1
				}
				console.log(5)
				this.toConfirmLogin(param)
				// 	} catch (e) {
				// 		this.$util.hideAll()
				// 	}
				// } catch (e) {
				// 	this.$util.showToast({
				// 		title: `没有获取到用户信息，请确认已登录`
				// 	});
				// }
			},
			async toConfirmLogin(login_params) {
				console.log(2222)
				let {
					loginType
				} = this

				let {
					type,
					param,
					init = 0
				} = login_params

				let methodType = {
					1: 'webLogin',
					2: 'appLogin',
					3: 'iosLogin'
				}

				console.log(3333)
				let methodModel = methodType[type]
				let user_info = await this.$api.base[methodModel](param)
				if (init == 1) {
					this.updateUserItem({
						key: 'appLogin',
						val: param.data
					})
				}
				let {
					autograph,
					data
				} = user_info
				
				this.$util.hideAll()
				this.updateUserItem({
					key: 'isShowLogin',
					val: false
				})
				this.updateUserItem({
					key: 'userInfo',
					val: data
				})
				this.updateUserItem({
					key: 'autograph',
					val: autograph
				})

				let {
					phone = ''
				} = data

				let {
					short_code_status = 0
				} = this.configInfo

				let isToPhone = loginType == 'weixin' && short_code_status && !phone
				let url = isToPhone ? `/user/pages/phone` : this.loginPage || `/pages/service`
				let pageArr = ['/pages/service', '/pages/technician', '/pages/order', '/subPages/technician/tabBar/mine']
				let openType = isToPhone || pageArr.includes(url) ? `reLaunch` : `navigateBack`
				// this.$util.goUrl({
				// 	url: (isToPhone || pageArr.includes(url)) ? url : 1,
				// 	openType
				// })
				
				AppSocket.onBing()
				
				uni.redirectTo({
					url: '/pages/service'
				})
			},
			async getLand(){
				if(this.is_read==0){
					this.$util.showToast({
						title: '请阅读并同意《隐私政策》与《服务协议》'
					})
					return false
				}
				let res = await this.$api.base.accontLogin({
					account: this.account,
					password: this.password
				})
				console.log(res)
				this.updateUserItem({
					key: 'isShowLogin',
					val: false
				})
				this.updateUserItem({
					key: 'userInfo',
					val: res.data
				})
				this.updateUserItem({
					key: 'autograph',
					val: res.autograph
				})
				// uni.setStorageSync('autograph',res.autograph)
				// uni.setStorageSync('userInfo',res.data)
				// uni.setStorageSync('loginType','weixin')
				
				uni.redirectTo({
					url: '/pages/service'
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #fff;
		height: 100%;
	}

	.pages-user-login {


		.logo-img {
			width: 400rpx;
			height: 400rpx;
		}

		.title {
			padding-top: 35px;
			// padding-bottom: 52px;
			font-size: 19px;
			font-weight: 700;
			color: #3d3d3d;
			text-align: center;
		}

		.login-btn {
			width: 220pt;
			height: 36pt;
			font-size: 15pt;
			border: 1rpx solid #000;
			transform: rotateZ(360deg);

			.iconfont {
				font-size: 19pt;
			}
		}

		.wechat {
			border: none;
			font-size: 13pt;
			box-shadow: 0 18rpx 9rpx 0 rgba(0, 188, 82, 0.07);
		}

		.apple {
			margin-top: 40rpx;
		}

		.banner-info {
			width: 100%;

			.banner-img {
				width: 100%;
				height: 100%;
			}

			.swiper-to-home {
				width: 122rpx;
				height: 47rpx;
				z-index: 999;
				right: 40rpx;
				top: 80rpx;
				background: rgba(0, 0, 0, 0.3);
			}
		}
	}

	.logoimg {
		width: 237rpx;
		height: 237rpx;
		display: block;
		margin-top: 80rpx;
		margin-bottom: 80rpx;
	}

	input {
		width: 528rpx;
		height: 78rpx;
		background: #FFFFFF;
		border-radius: 5rpx 5rpx 5rpx 5rpx;
		border: 1rpx solid #707070;
		padding: 0 25rpx;
		margin-bottom: 40rpx;
		font-size: 28rpx;
	}

	.leftimg {
		width: 159rpx;
		height: 400rpx;
		position: absolute;
		left: 0;
		top: 122rpx;
	}

	.rightimg {
		width: 109rpx;
		height: 254rpx;
		position: absolute;
		right: 0;
		top: 350rpx;
	}

	.line {
		width: 163rpx;
		height: 1rpx;
		background: #707070;
		margin: 32rpx 22rpx 0;
	}

	.wximg {
		width: 65rpx;
		height: 65rpx;
	}

	.wxbox {
		display: flex;
		margin-top: 185rpx;
	}
	.read{
		width: 45rpx;
		height: 45rpx;
		margin-right: 10rpx;
	}
</style>